<template>
  <div class="recommend">
    <div class="recommend_tit">为你推荐</div>
    <div class="recommend_list">
      <div class="recommend_item" v-for="(item, index) in recomList" :key="index" @click="JumpClick(item)">
        <img class="recommend_img" :src="item.listPicUrl" alt="" />
        <div class="recommend_item_text">
          <div class="recommend_item_tit"><span v-if="item.promotionTag">{{item.promotionTag}}</span>{{ item.goodsName }}</div>
          <div class="money"><i>￥</i>{{ parseFloat(item.retailPrice).toFixed(2) }} <span>￥{{ parseFloat(item.marketPrice).toFixed(2)}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recomList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      list: [
        {
          src:
            'https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20201210/feaadc37a2444237a61bc3a061dfe946.png',
          price: '10.22',
          name: '耳钉而定耳钉耳钉而定耳钉'
        },
        {
          src:
            'https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20201210/feaadc37a2444237a61bc3a061dfe946.png',
          price: '10.22',
          name: '耳钉而定耳钉耳钉而定耳钉'
        },
        {
          src:
            'https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20201210/feaadc37a2444237a61bc3a061dfe946.png',
          price: '10.22',
          name: '耳钉而定耳钉耳钉而定耳钉'
        },
        {
          src:
            'https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20201210/feaadc37a2444237a61bc3a061dfe946.png',
          price: '10.22',
          name: '耳钉而定耳钉耳钉而定耳钉'
        }
      ]
    }
  },
  methods: {
    JumpClick(item) {
      this.$router.push({ path: '/productDetail', query: { goodsId: item.goodsId } })
    }
  }
}
</script>

<style lang="less">
.recommend {
  padding: 20px 10px;
  background: linear-gradient(180deg, #fff, #f5f5f5);
}
.recommend_tit {
  width: 148px;
  height: 10px;
  background: url('../../static/nh/tit.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 10px;
  font-size: 17px;
  font-weight: bold;
  margin: 0 auto;
  color: #e93323;
}

.recommend_list {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  .recommend_item {
    width: 170px;
    height: 239px;
    background: #fff;
    border-radius: 8px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    .recommend_img {
      width: 100%;
      height: 170px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .recommend_item_text {
      padding: 10px;
      .recommend_item_tit {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        font-size: 14px;
        span {
          display: inline-block;
          background: #e93424;
          color: #fff;
          font-size: 10px;
          width: 29px;
          text-align: center;
          line-height: 17px;
          border-radius: 2px;
          margin-right: 4px;
          vertical-align: text-bottom;
        }
      }
      .money {
        color: #fc4141;
        font-size: 20px;
        font-weight: 700;
        padding-top: 10px;
        display: flex;
        align-items: center;
        i {
          font-size: 10px;
          font-style: normal;
        }
        span {
          text-decoration: line-through;
          font-size: 10px;
          color: #999;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
